<template>
  <div>
    <!-- 多条件查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 13px; padding-top: 20px; background-color: #e2e2e2;opacity:0.94;">
      <el-form-item label="机构名称：">
        <el-input v-model="formInline.jigouming" placeholder="机构名称"></el-input>
      </el-form-item>
      <el-form-item label="行政区划：">
        <el-cascader ref="casCader" size="large" :options="options" v-model="formInline.selectedOption" @change="handleChange" clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="机构性质：">
        <el-select v-model="formInline.jigouxz" clearable placeholder="-全部-">
          <el-option label="民办养老机构" value="民办养老机构"></el-option>
          <el-option label="公办养老机构" value="公办养老机构"></el-option>
          <el-option label="个人" value="个人"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主体性质：">
        <el-select v-model="formInline.zhutixz" clearable placeholder="-全部-">
          <el-option label="公办公营" value="公办公营"></el-option>
          <el-option label="公办民营" value="公办民营"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="兴办主体：">
        <el-select v-model="formInline.xingbanzt" clearable placeholder="-全部-">
          <el-option label="省级民政部门" value="省级民政部门"></el-option>
          <el-option label="地市级民政部门" value="地市级民政部门"></el-option>
          <el-option label="县级民政部门" value="县级民政部门"></el-option>
          <el-option label="乡镇人民政府（含地区办事处）" value="乡镇人民政府（含地区办事处）"></el-option>
          <el-option label="街道办事处" value="街道办事处"></el-option>
          <el-option label="单位、企业或社会组织" value="单位、企业或社会组织"></el-option>
          <el-option label="与境外合资、合作" value="与境外合资、合作"></el-option>
          <el-option label="境外独资" value="境外独资"></el-option>
          <el-option label="村委会" value="村委会"></el-option>
          <el-option label="居委会" value="居委会"></el-option>
          <el-option label="个人" value="个人"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="特困人员供养机构类型：">
        <el-select v-model="formInline.tekun" clearable placeholder="-全部-">
          <el-option label="农村特困人员供养服务机构(农村敬老院等)" value="农村特困人员供养服务机构(农村敬老院等)"></el-option>
          <el-option label="城市特困人员供养服务机构(福利院)" value="城市特困人员供养服务机构(福利院)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit" style="width: 80px; height: 40px; margin-left: 10px;">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="background-color: white; padding: 15px; margin-top: 15px;">
      <el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="openAdd" style="width: 80px; height: 40px;">新增</el-button>
      <el-button type="success" icon="el-icon-search" plain @click="look"  style="width: 80px; height: 40px; margin-left: 20px;">查看</el-button>
      <el-button type="warning" icon="el-icon-edit-outline" plain @click="openedit" style="width: 80px; height: 40px; margin-left: 20px;">修改</el-button>
      <el-button type="danger" icon="el-icon-delete" plain @click="deleterizhao" style="width: 80px; height: 40px; margin-left: 20px;">删除</el-button>
    </div>

    <!-- 列表详情border --------------------------------------------->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="序号" type="index" :index="indexAdd"></el-table-column>
      <el-table-column prop="jigouName" label="机构名称"></el-table-column>
      <el-table-column prop="kaibanDate" label="开办时间" :formatter="leaveTime"></el-table-column>
      <el-table-column prop="xingzhengquhua" label="行政区划"></el-table-column>
      <el-table-column prop="institutionsNature" label="机构性质"></el-table-column>
      <el-table-column prop="farenxingzhi" label="法人性质"></el-table-column>
      <el-table-column prop="zhuti" label="兴办主体"></el-table-column>
      <el-table-column prop="xingzhi" label="主体性质"></el-table-column>
      <el-table-column prop="extremelyNeedySupportType" label="特困人员供养机构类型"></el-table-column>
    </el-table>

    <!-- 新增数据 ---------------------------------->

    <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" :modal="false">
      <el-form :model="rizhaoguanli" :rules="rules" style="padding-left: 130px;">
        <el-form-item label="机构名称：" prop="jigouId">
          <el-select v-model="rizhaoguanli.jigouId" clearable placeholder="机构名称">
            <el-option v-for="item in jigouname" :key="item.noid" :label="item.jigouname" :value="item.noid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开办时间：" prop="kaibanDate">
          <div class="block">
            <el-date-picker v-model="rizhaoguanli.kaibanDate" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="行政区划：" prop="xingzhengquhua">
          <el-cascader ref="casCader" size="large" :options="options" v-model="rizhaoguanli.xingzhengquhua" @change="handleChanges">
          </el-cascader>
        </el-form-item>
        <el-form-item label="组织机构代码/统一社会信用代码：" prop="constructorCode">
          <el-input v-model="rizhaoguanli.constructorCode" autocomplete="off" placeholder="组织机构代码/统一社会信用代码" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="设立许可证：" prop="xuke">
          <el-radio-group v-model="rizhaoguanli.xuke">
            <el-radio label="1"> 有</el-radio>
            <el-radio label="0"> 无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因" v-if="rizhaoguanli.xuke==0">
          <el-checkbox-group v-model="rizhaoguanli.yuanyin">
            <el-checkbox label="0">无相关消防审核意见</el-checkbox>
            <el-checkbox label="1">无相关食药监意见</el-checkbox>
            <el-checkbox label="2">无相关环评意见</el-checkbox>
            <el-checkbox label="3">其他__</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="法人性质：" prop="farenxingzhi">
          <el-select v-model="rizhaoguanli.farenxingzhi" clearable placeholder="-全部-">
            <el-option label="社会团体（民办非企业）法人" value="社会团体（民办非企业）法人"></el-option>
            <el-option label="事业单位法人" value="事业单位法人"></el-option>
            <el-option label="工商企业法人" value="工商企业法人"></el-option>
            <el-option label="未经法人登记" value="未经法人登记"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人信息：" prop="farenxinxi">
          <el-input v-model="rizhaoguanli.farenxinxi" autocomplete="off" placeholder="法人信息" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="兴办主体：" prop="zhuti">
          <el-select v-model="rizhaoguanli.zhuti" clearable placeholder="-全部-">
            <el-option label="省级民政部门" value="省级民政部门"></el-option>
            <el-option label="地市级民政部门" value="地市级民政部门"></el-option>
            <el-option label="县级民政部门" value="县级民政部门"></el-option>
            <el-option label="乡镇人民政府（含地区办事处）" value="乡镇人民政府（含地区办事处）"></el-option>
            <el-option label="街道办事处" value="街道办事处"></el-option>
            <el-option label="单位、企业或社会组织" value="单位、企业或社会组织"></el-option>
            <el-option label="与境外合资、合作" value="与境外合资、合作"></el-option>
            <el-option label="境外独资" value="境外独资"></el-option>
            <el-option label="村委会" value="村委会"></el-option>
            <el-option label="居委会" value="居委会"></el-option>
            <el-option label="个人" value="个人"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作人员数量：" prop="quantity">
          <el-input v-model="rizhaoguanli.quantity" autocomplete="off" placeholder="工作人员数量" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="主体性质：" prop="xingzhi">
          <el-select v-model="rizhaoguanli.xingzhi" clearable placeholder="-全部-">
            <el-option label="公办公营" value="公办公营"></el-option>
            <el-option label="公办民营" value="公办民营"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营模式：" prop="moshi">
          <el-select v-model="rizhaoguanli.moshi" clearable placeholder="-全部-">
            <el-option label="纯福利性质的养老院" value="纯福利性质的养老院"></el-option>
            <el-option label="混合型养老院" value="混合型养老院"></el-option>
            <el-option label="专业经营管理" value="专业经营管理"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="this.funame.zbxName" prop="type">
          <el-checkbox-group v-model="rizhaoguanli.fwgnlist">                       <!-- :key的值不可重复，可用id等值 -->
            <el-checkbox v-for="city in fuzhi" :label="city.noid" :key="city.noid" name="type">{{city.zhibiao}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 文件上传 -->
        <el-form-item label="机构资质：">
          <el-upload
            class="avatar-uploade"
            action="http://upload-z1.qiniup.com/"
            :before-remove="beforeRemove"
            :before-upload="beforeAvatarUploadfild"
            :on-success="handleAvatarSuccess"
            :limit="1"
            :data="shuju"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary" style="width: 126px; height: 40px; font: normal 200 13px '微软雅黑';" @click="getToken">点击上传文件</el-button>
          </el-upload>
        </el-form-item><br>
        <!-- 文件上传 -->
        <el-form-item label="上传图片：" >
          <!-- 注意：这里的http://upload-z2.qiniup.com/地址是对应我空间选择的华南-广东 区域的。如果区域和我不一样的这里要改 -->
          <el-upload
          class="avatar-uploader"
          action="http://upload-z1.qiniup.com/"
          :show-file-list="false"
          :data="shuju"
          :limit="1"
          :on-success="handleAvatarSuccessf"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" width="200px" height="200px" class="avatar"><br>
          <el-button type="primary" style="width: 126px; height: 40px; font: normal 200 13px '微软雅黑';" @click="getToken">点击上传图片</el-button>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="经度：" prop="longitude">
          <el-input v-model="rizhaoguanli.longitude" autocomplete="off" placeholder="经度" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="纬度：" prop="latitude">
          <el-input v-model="rizhaoguanli.latitude" autocomplete="off" placeholder="纬度" style="width: 120px;"></el-input>
        </el-form-item>
        <div class="app-container">
          <span>定位:</span>
          <el-autocomplete v-model="mapLocation.address" :fetch-suggestions="querySearch"
          placeholder="输入省市" style="width: 100%" :trigger-on-focus="false" @select="handleSelect"/>
          <div style="margin: 5px">
          <!--这个是显示出来的 :center="mapCenter" 这个是用默认经纬度来显示出来的  ak就是你在百度地图开放平台申请的哪个ak密钥例：sAaV8dOOlfcDH5Cu8UGfZBPZfiKYYoV0 当然这里也可以用人家的 ak-->
            <baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="FmYzGfpytrYDHDY6gNwa2Z0kYZAhUCSS" @ready="handlerBMap" />
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" style="width: 80px; height: 40px;">取 消</el-button>
        <el-button type="primary" @click="add" v-show="isAdd" style="width: 80px; height: 40px;">确 定</el-button>
        <el-button type="primary" @click="addupdate" v-show="!isAdd" style="width: 80px; height: 40px;">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 新增数据 -->

    <!-- 查看数据 -->
    <el-dialog title="查看" :visible.sync="lookbutton" :modal="false">
      <el-form :model="rizhaoguanli" :rules="rules" style="padding-left: 130px;">
        <el-form-item label="机构名称：">
        <el-input v-model="rizhaoguanli.jigouName" autocomplete="off" :disabled="true" style="width: 320px;"></el-input>
      </el-form-item>
        <el-form-item label="开办时间：" prop="kaibanDate">
          <div class="block">
            <el-date-picker v-model="rizhaoguanli.kaibanDate" type="date" :disabled="true" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="行政区划：">
          <el-input v-model="rizhaoguanli.xingzhengquhua" autocomplete="off" :disabled="true" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="组织机构代码/统一社会信用代码：">
          <el-input v-model="rizhaoguanli.constructorCode" autocomplete="off" :disabled="true" placeholder="组织机构代码/统一社会信用代码" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="设立许可证：" prop="xuke">
          <el-radio-group v-model="rizhaoguanli.xuke"> 
            <el-radio disabled label="1"> 有</el-radio>
            <el-radio disabled label="0"> 无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因" v-if="rizhaoguanli.xuke==0">
          <el-checkbox-group v-model="rizhaoguanli.yuanyin">
            <el-checkbox disabled label="0">无相关消防审核意见</el-checkbox>
            <el-checkbox disabled label="1">无相关食药监意见</el-checkbox>
            <el-checkbox disabled label="2">无相关环评意见</el-checkbox>
            <el-checkbox disabled label="3">其他__</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="法人性质：">
          <el-select v-model="rizhaoguanli.farenxingzhi" clearable placeholder="-全部-" :disabled="true">
            <el-option label="社会团体（民办非企业）法人" value="社会团体（民办非企业）法人"></el-option>
            <el-option label="事业单位法人" value="事业单位法人"></el-option>
            <el-option label="工商企业法人" value="工商企业法人"></el-option>
            <el-option label="未经法人登记" value="未经法人登记"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人信息：">
          <el-input v-model="rizhaoguanli.farenxinxi" autocomplete="off" :disabled="true" placeholder="法人信息" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="兴办主体：">
          <el-select v-model="rizhaoguanli.zhuti" clearable placeholder="-全部-" :disabled="true">
            <el-option label="省级民政部门" value="省级民政部门"></el-option>
            <el-option label="地市级民政部门" value="地市级民政部门"></el-option>
            <el-option label="县级民政部门" value="县级民政部门"></el-option>
            <el-option label="乡镇人民政府（含地区办事处）" value="乡镇人民政府（含地区办事处）"></el-option>
            <el-option label="街道办事处" value="街道办事处"></el-option>
            <el-option label="单位、企业或社会组织" value="单位、企业或社会组织"></el-option>
            <el-option label="与境外合资、合作" value="与境外合资、合作"></el-option>
            <el-option label="境外独资" value="境外独资"></el-option>
            <el-option label="村委会" value="村委会"></el-option>
            <el-option label="居委会" value="居委会"></el-option>
            <el-option label="个人" value="个人"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作人员数量：">
          <el-input v-model="rizhaoguanli.quantity" autocomplete="off" :disabled="true" placeholder="工作人员数量" style="width: 320px;"></el-input>
        </el-form-item>
        <el-form-item label="主体性质：">
          <el-select v-model="rizhaoguanli.xingzhi" clearable placeholder="-全部-" :disabled="true">
            <el-option label="公办公营" value="公办公营"></el-option>
            <el-option label="公办民营" value="公办民营"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营模式：">
          <el-select v-model="rizhaoguanli.moshi" clearable placeholder="-全部-" :disabled="true">
            <el-option label="纯福利性质的养老院" value="0"></el-option>
            <el-option label="混合型养老院" value="1"></el-option>
            <el-option label="专业经营管理" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="this.funame.zbxName" prop="type">
          <el-checkbox-group v-model="rizhaoguanli.fwgnlist">
            <el-checkbox v-for="city in fuzhi" :label="city.noid" :key="city.noid" name="type" disabled>{{city.zhibiao}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 文件上传 -->
        <el-form-item label="机构资质：">
          <el-input v-model="rizhaoguanli.wenjian" autocomplete="off" :disabled="true"></el-input>
        </el-form-item><br>
        <!-- 文件上传 -->
        <!-- 文件上传 -->
        <el-form-item label="上传图片：" >
          <img style="width: 170px;height: 200px;" :src="rizhaoguanli.images" fit="fill">
        </el-form-item><br>
        <!-- 文件上传 -->
        <el-form-item label="经度：">
          <el-input v-model="rizhaoguanli.longitude" autocomplete="off" placeholder="经度" :disabled="true" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="纬度：">
          <el-input v-model="rizhaoguanli.latitude" autocomplete="off" placeholder="纬度" :disabled="true" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="定位：">
          <el-input v-model="rizhaoguanli.dingwei" autocomplete="off" :disabled="true" style="width: 220px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" style="width: 80px; height: 40px;">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看数据 -->
    <!-- 分页 ------------------------------------------------>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment';//格式化日期时间
import { regionData } from 'element-china-area-data';//先在需要显示省市区的页面
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';//百度地图api
export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      formInline: {// 多条件查询带到后台的值
        jigouming: '',
        selectedOption:'',
        jigouxz: '',
        zhutixz: '',
        xingbanzt:'',
        tekun:'',
        currentPage: 1,//当前页
        pageSize: 10,//每页显示条数
      },
      tableData: [],//查询到的信息进行列表展示
      multipleSelection: [],//查看修改删除时往里边放id的
      selectedOptions:[],
      options: regionData,
      total:0,//总页数
      isAdd:true,//控制文字提示
      dialogFormVisible:false,//控制弹窗显示与否
      lookbutton: false,//控制查看窗口显示与否
      bendi:'http://rk75ipiuw.hb-bkt.clouddn.com/',
      rizhaoguanli:{//添加时传往后台的数据
        jigouId:'',
        jigouName:'',
        kaibanDate:'',
        xingzhengquhua:'',
        constructorCode:'',
        xuke:'',
        farenxingzhi:'',
        farenxinxi:'',
        zhuti:'',
        quantity:'',
        xingzhi:'',
        moshi:'',
        wenjian:'',
        images:'',
        longitude:'',
        latitude:'',
        dingwei:'',
        yuanyin:[],
        fuwuxiangid:'',
        fwgnlist:[],
        extremelyNeedySupportType:'',
        institutionsNature:'',
      },
      funame:[],//指标项-服务
      fuzhi:[],//指标值-各种服务
      jigouname:[],//添加时选择的机构名称
      fileList:[],//文件上传list
      mapZoom: 15,//地图缩放大大小
      mapCenter: { lng: 116.403963 , lat: 39.915119 },//经纬度，一开始给的默认值是北京的
      mapLocation: {
        address: undefined,//默认为空的地图名称
        coordinate: undefined,
      },
      imageUrl: '',
      shuju:{
        key:"",
        token:"",
      },

      //表单验证
      rules: {
        jigouId: [
          { required: true, message: '请选择养老机构', trigger: 'change' },
        ],
        kaibanDate: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' },
        ],
        xingzhengquhua: [
          { required: true, message: '请选择行政区划', trigger: 'change' },
        ],
        constructorCode: [
          { required: true, message: '请输入组织机构代码/统一社会信用代码', trigger: 'blur' },
          { min: 18, max: 18, message: '长度18位阿拉伯数字或大写英文字母', trigger: 'blur' },
        ],
        xuke: [
          { required: true, message: '请选择有无许可证', trigger: 'change' },
        ],
        farenxingzhi: [
          { required: true, message: '请选择法人性质', trigger: 'change' },
        ],
        farenxinxi: [
          { required: true, message: '请输入法人信息', trigger: 'blur' },
        ],
        zhuti: [
          { required: true, message: '请选择兴办主体', trigger: 'change' },
        ],
        quantity: [
          { required: true, message: '请输入工作人员数量', trigger: 'blur' },
        ],
        xingzhi: [
          { required: true, message: '请选择主题性质', trigger: 'change' },
        ],
        moshi: [
          { required: true, message: '请选择运营模式', trigger: 'change' },
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' },
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    onSubmit() {//去往查询后台，查询相关人员信息在前台做回显
      axios.post("/chain-api/rijianzhaoliao/selectrjzl",this.formInline).then(
        res=>{
          console.log(res);
          this.tableData=res.data.data.page.list;
          this.formInline.currentPage=res.data.data.page.pageNum;
          this.formInline.pageSize=res.data.data.page.pageSize;
          this.total=res.data.data.page.total;
        }
      )
    },
    chaxiangandzhi(){
      //查询服务信息内容
      axios.get("/chain-api/rijianzhaoliao/getXiangzhi").then(
        res=>{
          this.funame=res.data.data.zblist;
          this.fuzhi=res.data.data.xzlist;
          this.jigouname=res.data.data.basicdata;
        }
      )
    },
    openAdd(){
      this.isAdd=true;
      this.dialogFormVisible=true;
      this.chaxiangandzhi();
      this.rizhaoguanli.jigouId='';
      this.rizhaoguanli.jigouName='';
      this.rizhaoguanli.kaibanDate='';
      this.rizhaoguanli.xingzhengquhua='';
      this.rizhaoguanli.constructorCode='';
      this.rizhaoguanli.xuke='';
      this.rizhaoguanli.farenxingzhi='';
      this.rizhaoguanli.farenxinxi='';
      this.rizhaoguanli.zhuti='';
      this.rizhaoguanli.quantity='';
      this.rizhaoguanli.xingzhi='';
      this.rizhaoguanli.moshi='';
      this.rizhaoguanli.wenjian='';
      this.rizhaoguanli.images='';
      this.rizhaoguanli.longitude='';
      this.rizhaoguanli.latitude='';
      this.rizhaoguanli.dingwei='';
      this.rizhaoguanli.yuanyin=[];
      this.rizhaoguanli.fuwuxiangid='';
      this.rizhaoguanli.fwgnlist=[];
    },
    add(){//向数据库进行数据添加
      this.isAdd=false;
      this.dialogFormVisible=false;
      this.rizhaoguanli.fuwuxiangid=this.funame.noid;
      console.log(this.rizhaoguanli);
      axios.post("/chain-api/rijianzhaoliao/addrizhao",this.rizhaoguanli).then(
        res=>{
          if(res.data.code){
            this.$message({
              showClose: true,
              message: "增加成功",
              type: 'success'
            });
          }else{
            this.$message({
              showClose: true,
              message:"增加失败",
            });
          }
          this.onSubmit();
        }
      )
    },
    openedit(){//打开修改窗口
      if(this.multipleSelection.length!=1){
        this.$message.error("请选择一条数据");
        this.onSubmit();
      }else{
        this.isAdd=false;
        this.dialogFormVisible=true;
        let ids = this.multipleSelection[0].noid;
        this.chaxiangandzhi();
        axios.get("/chain-api/rijianzhaoliao/lookrizhao/"+ids).then(
          res=>{
            console.log(res);
            this.rizhaoguanli=res.data.data.rzxx;
            this.funame=res.data.data.zblist;
            this.mapLocation.address=this.rizhaoguanli.dingwei;
          }
        );
      }
    },
    addupdate(){//修改信息后进行保存操作
      this.dialogFormVisible=false;
      axios.put("/chain-api/rijianzhaoliao",this.rizhaoguanli).then(
        res=>{
          if(res.data.code){
            this.$message({
              showClose: true,
              message: "修改成功",
              type: 'success'
            })
          }else{
            this.$message.error({
              showClose: true,
              message:"修改失败",
            })
          }
          this.onSubmit();
        }
      )
    },
    look(){
      if(this.multipleSelection.length!=1){
        this.$message.error("请选择一条数据");
        this.onSubmit();
      }else{
        this.lookbutton = true;
        let ids = this.multipleSelection[0].noid;
        console.log(ids);
        //先将所有的项显示出来
        this.chaxiangandzhi();
        //获取到的是本表中的id信息
        axios.get("/chain-api/rijianzhaoliao/lookrizhao/"+ids).then(
          res=>{
            console.log(res);
            this.rizhaoguanli=res.data.data.rzxx;
            this.funame=res.data.data.zblist;
          }
        );
      }
    },
    deleterizhao(){
      if(this.multipleSelection.length==0){
        this.$message.error("请选择一条信息");
      }else{
        let ids = this.multipleSelection.map(value => value.noid);
        console.log(ids);
        axios.post("/chain-api/rijianzhaoliao/editRizhaoguanli",ids).then(
          res=>{
            console.log(res);
            if (res.data.code>0) {
              this.$message.success("批量删除成功");
              this.onSubmit();
            }else{
              this.$message.error("批量删除失败");
              this.onSubmit();
            }
          }
        );
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleChange(value) {
      console.log('value', value);//获取到所选省市区的编码
      let info = this.$refs.casCader.getCheckedNodes()[0].pathLabels;//获取到省市区的名称
      this.formInline.selectedOption=info[0]+info[1]+info[2];//将找到的省市县的名称赋给多条件查询要带到后台的值
    },
    handleChanges(value) {
      console.log('value', value);//获取到所选省市区的编码
      let info = this.$refs.casCader.getCheckedNodes()[0].pathLabels;//获取到省市区的名称
      this.rizhaoguanli.xingzhengquhua=info[0]+info[1]+info[2];//将找到的省市县的名称赋给多条件查询要带到后台的值
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.currentPage = val;
      this.onSubmit();
    },
    // type序号 - 页面切换递增
    indexAdd(index) {
      // console.log(index, 222222)
      const pagea = this.formInline.currentPage; // 当前页码
      const pagesize = this.formInline.pageSize; // 每页条数
      return index + 1 + (pagea - 1) * pagesize;
    },
    leaveTime(row, column, cellValue, index){//日期转换显示
      return moment(cellValue).format('YYYY年MM月DD日');
    },
    handleExceed(files, fileList) {
      console.log("handleExceed");
      this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //显示地图的方法
    handlerBMap({ BMap, map }) {//传过来两个集合分别是地方的姓名和经纬度的地址
      this.BMap = BMap
      this.map = map
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {//判断是true还是fales
        //让你输入的经纬度和mapCenter这个里面的经纬度一直不一致就赋值过去，这样就能让两边坐标一致位置显示更准确
        this.mapCenter.lng = this.mapLocation.coordinate.lng
        this.mapCenter.lat = this.mapLocation.coordinate.lat
        this.mapZoom = 15//地图显示的大小
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))//创建一个新的地图坐标并标记出来，放到mapLocation里的coordinate这个里面
      } else {
        //如果上边判断是fales就给上默认值，我这用不到就注释了
        // this.mapCenter.lng = 112.271429
        // this.mapCenter.lat = 24.135336
        this.mapZoom = 10//地图显示的大小
      }
    },
    //这个方法是标题、内容、所有。当每次切换范围的时候，需要重新请求后台并将结果，并重新显示出来，即重新触发一下组件的 fetch-suggestions绑定的方法。
    querySearch(queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()//百度地图web服务api
      myGeo.getPoint(queryString, function(point) {
        if (point) {
        that.mapLocation.coordinate = point
        that.makerCenter(point)
        } else {
        that.mapLocation.coordinate = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function(results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { value: x.address + x.title, point: x.point
            }
              s.push(item)
              cb(s)
            }
          } else {
            cb();
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    handleSelect(item) {
      console.log(item);
      var { point } = item
      this.mapLocation.coordinate = point
      this.makerCenter(point)
      this.mapCenter.lng = 0
      this.mapCenter.lat = 0
      this.rizhaoguanli.dingwei=item.value;
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays()
        this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 15
      }
    },
    handleAvatarSuccess(res, file) {//文件
      console.log(res);//上传成功后返回值json{"hash":"FphhkBU4u7F36rDb58cqK3fCmloD","key":"testd705686f-d42a-4991-a55f-9b6479f65e55"}
      this.imageUrl = URL.createObjectURL(file.raw);
      this.rizhaoguanli.wenjian="http://rk75ipiuw.hb-bkt.clouddn.com/"+res.key;
    },
    handleAvatarSuccessf(res, file) {//图片
      console.log(res);//上传成功后返回值json{"hash":"FphhkBU4u7F36rDb58cqK3fCmloD","key":"testd705686f-d42a-4991-a55f-9b6479f65e55"}
      this.imageUrl = URL.createObjectURL(file.raw);
      this.rizhaoguanli.images="http://rk75ipiuw.hb-bkt.clouddn.com/"+res.key;
    },
    beforeAvatarUpload(file) {//判断上传的文件格式--图片
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      
      return isJPG && isLt2M;
    },
    beforeAvatarUploadfild(file) {//判断上传的文件格式--文件
      console.log(file);
      const isExcel = file.type === 'application/vnd.ms-excel';
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isExcel){
        this.$message.error('上传机构资质只能是 Excel 格式!');
      }
      if(!isLt2M){
        this.$message.error('上传机构资质文件大小不能超过 10MB!');
      }
      return isExcel && isLt2M;
    },
    getToken(){//上传文件
      axios.get("/chain-api/test/getToken/yanglaofuwuxitong").then(
        res=>{
          this.shuju.token = res.data.data.token;
          this.shuju.key = res.data.data.fname;
      });
    },
},
mounted() {
    this.onSubmit();
  },
}
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .bm-view {
    width: 100%;
    height: 650px;
  }
</style>